Setup dự án Node.js với TypeScript ESLint Prettier

您所在的位置：网站首页 › nodejs node_modules › Setup dự án Node.js với TypeScript ESLint Prettier

Setup dự án Node.js với TypeScript ESLint Prettier

2023-04-03 12:47| 来源: 网络整理| 查看: 265

Setup dự án Node.js với TypeScript ESLint PrettierDư Thanh Được28 tháng 03 2023 🎉 9 phút đọc

🎉 Anh em mà muốn rút ngắn 2 năm học và làm React.Js để có mức lương 25 - 30 triệu/tháng thì mình recommend khóa 🏆 React.Js Super của mình

Hiện tại đang được xếp hạng Top 1 Google Việt Nam với từ khóa "Khóa ReactJs" hoặc "Khóa học ReactJs"

Tìm khắp 🇻🇳 và cả 🌍 ngoài kia không có khóa nào chất lượng được như thế này đâu😉

Xem thông tin chi tiết

Đây là năm 2023 rồi, bây giờ mà code Node.js với Javascript thì có vẻ hơi "lạc hậu" 🥲. Typescript gần như là bắt buộc khi code những project liên quan đến Javascript trong những năm gần đây.

Code TypeScript một thời gian bạn sẽ không muốn quay về code Javascript nữa. Trust me 😎.

Có thể bạn sẽ thắc mắc, "thế ESLint với Prettier dùng để làm gì? "

ESLint thì chuẩn hóa tiêu chuẩn code, còn Prettier thì format code cho đẹp. Khi code một dự án chỉ có một mình bạn thì sao cũng được, nhưng khi code một dự án nhiều người thì đòi hỏi tất cả mọi người trong team phải code theo cùng một tiêu chuẩn, nếu không thì sẽ rất khó khăn trong việc đọc code của những người khác. Và ESLint và Prettier sẽ giúp bạn giải quyết vấn đề này.

Vì vậy, trong bài viết này, mình sẽ hướng dẫn các bạn cách setup dự án Node.js với TypeScript, cũng như cách sử dụng ESLint Prettier để check code.

🥇Cấu trúc thư mục dự án

Cấu trúc thư mục dự án mình sẽ sử dụng như sau:

txt📦nodejs-typescript ┣ 📂dist ┣ 📂src ┃ ┣ 📂constants ┃ ┃ ┣ 📜enum.ts ┃ ┃ ┣ 📜httpStatus.ts ┃ ┃ ┗ 📜message.ts ┃ ┣ 📂controllers ┃ ┃ ┗ 📜users.controller.ts ┃ ┣ 📂middlewares ┃ ┃ ┣ 📜error.middleware.ts ┃ ┃ ┣ 📜file.middleware.ts ┃ ┃ ┣ 📜users.middleware.ts ┃ ┃ ┗ 📜validation.middleware.ts ┃ ┣ 📂models ┃ ┃ ┣ 📂database ┃ ┃ ┃ ┣ 📜Blacklist.ts ┃ ┃ ┃ ┣ 📜Bookmark.ts ┃ ┃ ┃ ┣ 📜Follower.ts ┃ ┃ ┃ ┣ 📜Hashtag.ts ┃ ┃ ┃ ┣ 📜Like.ts ┃ ┃ ┃ ┣ 📜Media.ts ┃ ┃ ┃ ┣ 📜Tweet.ts ┃ ┃ ┃ ┗ 📜User.ts ┃ ┃ ┣ 📜Error.ts ┃ ┃ ┗ 📜Success.ts ┃ ┣ 📂routes ┃ ┃ ┗ 📜users.route.ts ┃ ┣ 📂services ┃ ┃ ┣ 📜bookmarks.service.ts ┃ ┃ ┣ 📜database.service.ts ┃ ┃ ┣ 📜followers.service.ts ┃ ┃ ┣ 📜hashtags.service.ts ┃ ┃ ┣ 📜likes.service.ts ┃ ┃ ┣ 📜medias.service.ts ┃ ┃ ┣ 📜tweets.service.ts ┃ ┃ ┗ 📜users.service.ts ┃ ┣ 📂utils ┃ ┃ ┣ 📜crypto.ts ┃ ┃ ┣ 📜email.ts ┃ ┃ ┣ 📜file.ts ┃ ┃ ┣ 📜helpers.ts ┃ ┃ ┗ 📜jwt.ts ┃ ┣ 📜index.ts ┃ ┗ 📜type.d.ts ┣ 📜.editorconfig ┣ 📜.env ┣ 📜.eslintignore ┣ 📜.eslintrc ┣ 📜.gitignore ┣ 📜.prettierignore ┣ 📜.prettierrc ┣ 📜nodemon.json ┣ 📜package.json ┣ 📜tsconfig.json ┗ 📜yarn.lock

Giải thích các thư mục:

dist: Thư mục chứa các file build src: Thư mục chứa mã nguồn src/constants: Chứa các file chứa các hằng số src/middlewares: Chứa các file chứa các hàm xử lý middleware, như validate, check token, ... src/controllers: Chứa các file nhận request, gọi đến service để xử lý logic nghiệp vụ, trả về response src/services: Chứa các file chứa method gọi đến database để xử lý logic nghiệp vụ src/models: Chứa các file chứa các model src/routes: Chứa các file chứa các route src/utils: Chứa các file chứa các hàm tiện ích, như mã hóa, gửi email, ... Còn lại là những file config cho project như .eslintrc, .prettierrc, ... mình sẽ giới thiệu ở bên dưới 🥇Khởi tạo dự án

Đầu tiên chúng ta cần tạo folder để làm việc.

bashmkdir nodejs-typescriptcd nodejs-typescript

Tiếp theo, chúng ta sẽ setup dự án với package.json và thêm các dependencies cần thiết.

🥈Tạo dự án Node.js

Sử dụng -y khi chạy lệnh npm init khi tạo file package.json để không cần nhập các thông tin về project. Chúng ta có thể vào file package.json để chỉnh sửa sau.

bashnpm init -y 🥈Thêm TypeScript như một dev dependency

Bước này chắc sẽ không bất ngờ lắm nhỉ, để sử dụng Typescript, chúng ta cần phải cài đặt nó trước.

bashnpm install typescript --save-dev

Sau khi cài typescript, chúng ta có thể dùng TypeScript để biên dịch code bằng câu lệnh tsc (lưu ý là mình cài local nên muốn dùng tsc thì phải thông qua file package.json hoặc dùng npx tsc).

🥈Cài đặt kiểu dữ liệu TypeScript cho Node.js

Vì dùng TypeScript để code Node.js nên chúng ta cần cài thêm kiểu dữ liệu cho Node.js.

bashnpm install @types/node --save-dev 🥈Cài đặt các package config cần thiết còn lại

Chúng ta cần cài đặt các package config cần thiết để làm việc với TypeScript như ESLint, Prettier, ...

bashnpm install eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser ts-node tsconfig-paths rimraf nodemon --save-dev eslint: Linter (bộ kiểm tra lỗi) chính prettier: Code formatter chính eslint-config-prettier: Cấu hình ESLint để không bị xung đột với Prettier eslint-plugin-prettier: Dùng thêm một số rule prettier cho eslint @typescript-eslint/eslint-plugin: ESLint plugin cung cấp các rule cho Typescript @typescript-eslint/parser: Parser cho phép ESLint kiểm tra lỗi Typescript ts-node: Dùng để chạy TypeScript code trực tiếp mà không cần build tsconfig-paths: Khi setting alias import trong dự án dùng ts-node thì chúng ta cần dùng tsconfig-paths để nó hiểu được paths và baseUrl trong file tsconfig.json rimraf: Dùng để xóa folder dist khi trước khi build nodemon: Dùng để tự động restart server khi có sự thay đổi trong code 🥈Cấu hình tsconfig.json

Tạo file tsconfig.json tại thư mục root, có thể tạo bằng lệnh touch tsconfig.json hoặc cứ tạo bằng tay, quen cái nào thì dùng cái đấy

Tiếp theo copy và paste cấu hình dưới đây vào file tsconfig.json của bạn

json{ "compilerOptions": { "module": "CommonJS", // Quy định output module được sử dụng "moduleResolution": "node", // "target": "ES2020", // Target ouput cho code "outDir": "dist", // Đường dẫn output cho thư mục build "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */, "strict": true /* Enable all strict type-checking options. */, "skipLibCheck": true /* Skip type checking all .d.ts files. */, "baseUrl": ".", // Đường dẫn base cho các import "paths": { "~/*": ["src/*"] // Đường dẫn tương đối cho các import (alias) } }, "ts-node": { "require": ["tsconfig-paths/register"] }, "files": ["src/type.d.ts"], // Các file dùng để defined global type cho dự án "include": ["src/**/*"] // Đường dẫn include cho các file cần build} 🥈Cấu hình file config cho ESLint

Tạo file .eslintrc tại thư mục root, copy và paste config dưới đây vào file .eslintrc của bạn

json{ "root": true, "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "prettier"], "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "eslint-config-prettier", "prettier"], "rules": { "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-unused-vars": "off", "prettier/prettier": [ "warn", { "arrowParens": "always", "semi": false, "trailingComma": "none", "tabWidth": 2, "endOfLine": "auto", "useTabs": false, "singleQuote": true, "printWidth": 120, "jsxSingleQuote": true } ] }}

Anh em nên cài extension ESLint cho VS Code để nó hiểu nhé

Tiếp theo tạo file .eslintignore để ignore các file không cần kiểm tra lỗi

jsonnode_modules/dist/ 🥈Cấu hình file config cho Prettier

Tạo file .prettierrc trong thư trong thư mục root với nội dung dưới đây

json{ "arrowParens": "always", "semi": false, "trailingComma": "none", "tabWidth": 2, "endOfLine": "auto", "useTabs": false, "singleQuote": true, "printWidth": 120, "jsxSingleQuote": true}

Mục đích là cấu hình prettier.

Anh em nên cài Extension Prettier - Code formatter cho VS Code để nó hiểu nhé.

Tiếp theo Tạo file .prettierignore ở thư mục root

Mục đích là Prettier bỏ qua các file không cần thiết

ignorenode_modules/dist/ 🥈Config editor để chuẩn hóa cấu hình editor

Tạo file .editorconfig ở thư mục root

Mục đích là cấu hình các config đồng bộ các editor với nhau nếu dự án có nhiều người tham gia.

Để VS Code hiểu được file này thì anh em cài Extension là EditorConfig for VS Code nhé

editorconfig[*]indent_size = 2indent_style = space 🥈Cấu hình file gitignore

Tạo file .gitignore ở thư mục root

Mục đích là cấu hình các file không cần đẩy lên git

ignorenode_modules/dist/ 🥈Cấu hình file nodemon.json

Tạo file nodemon.json ở thư mục root

Mục đích là cấu hình nodemon để tự động restart server khi có sự thay đổi trong code

json{ "watch": ["src"], "ext": ".ts,.js", "ignore": [], "exec": "npx ts-node ./src/index.ts"} 🥈Cấu hình file package.json

Mở file package.json lên, thêm đoạn script này vào

json "scripts": { "dev": "npx nodemon", "build": "rimraf ./dist && tsc", "start": "node dist/index.js", "lint": "eslint .", "lint:fix": "eslint . --fix", "prettier": "prettier --check .", "prettier:fix": "prettier --write ." } 🥇Tạo file index.ts

Tạo file index.ts trong thư mục src

tsconst name: string = 'Dư Thanh Được'console.log(name)

Bây giờ dùng các câu lệnh dưới để test thử nhé

🥇Câu lệnh để chạy dự án

Đến đây là xong rồi đó. Các bạn có thể chạy dự án bằng các câu lệnh sau

🥈Chạy dự án trong môi trường dev bashnpm run dev 🥈Build dự án TypeScript sang JavaScript cho production

Có thể các bạn sẽ hỏi rằng tại sao phải build, để nguyên TypeScript thì luôn vẫn được mà. Đúng vậy nhưng khi build thì chúng ta sẽ có những lợi ích sau

Code chạy được mà không cần cài đặt TypeScript Chạy nhanh hơn vì đã được biên dịch rồi Có thể minify code để giảm dung lượng Code chạy được trên những mội trường không hỗ trợ TypeScript

Để build thì chạy câu lệnh sau

bashnpm run build

Tiếp theo chạy câu lệnh sau để chạy dự án, lưu ý câu lệnh này đòi hỏi bạn phải build trước để có code trong thư mục dist

bashnpm run start 🥈Kiểm tra lỗi ESLint / Prettier

Câu lệnh này sẽ giúp bạn kiểm tra lỗi ESLint trong dự án

bashnpm run lint

Nếu bạn muốn ESLint tự động fix lỗi thì chạy câu lệnh sau

bashnpm run lint:fix

Tương tự với Prettier, ta có câu lệnh

bashnpm run prettier

và

bashnpm run prettier:fix 🥇Một số lưu ý

Vì đây là dự án chạy với Typescript nên khi cài đặt bất cứ một thư viện này chúng ta nên xem thư viện đó có hỗ trợ TypeScript không nhé. Có một số thư viện ở npm hỗ trợ TypeScript sẵn, có một số thì chúng ta phải cài thêm bộ TypeScript của chúng qua @types/ten-thu-vien

Ví dụ như express thì chúng ta cài như sau

bashnpm i expressnpm i @types/express -D

Chúc các bạn thành công nhé.

Thank me later 🤪

Khóa học ReactJs giúp bạn chinh phục mức lương 25 - 30 triệu/tháng

Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅

Chúng ta đều hiểu rằng Javascript và React không hề dễ, chúng có quá nhiều concept cần phải học. Mình cũng cảm thấy nó khó! Nay lại có thể Typescript nữa 🥲, thật sự khó nuốt.

Nhưng đừng lo: Bạn có thể nắm vững các kiến thức trên chỉ trong một khóa học ReactJs Super - Shopee Clone Typescript

Mình đã bắt đầu code React vào năm 2019, và nó đã trở thành thư viện ưa thích của mình để xây dựng UI và web app. Mình cũng đã làm việc với nhiều framework khác như Angular, Vue nhưng thực sự chỉ có React là đem lại cho mình cảm xúc và sự hiệu quả. 💓

Nếu bạn đang gặp khó khăn với React, mình ở đây để giúp bạn!

Mình đã dành hơn 6 tháng để phát triển khóa học ReactJs Super - Shopee Clone Typescript. Trong khóa này bạn sẽ được học mọi thứ về thư viện ReactJs, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục mức lương 25 - 30 triêu/tháng

Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, quizz, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻

Khóa học ReactJs Super - Shopee Clone TypescriptDư Thanh ĐượcMột developer thích nghiên cứu và chia sẻ kiến thức về lập trình, blockchain, marketing. Chuyên code và dạy lập trình websiteAdd friendMessage

【本文地址】

Setup dự án Node.js với TypeScript ESLint Prettier

Setup dự án Node.js với TypeScript ESLint Prettier

今日新闻

推荐新闻